<template>
  <div class="goods">
    <PageSearch
      :searchFormConfig="goodsSearchFormConfig"
      @handleSearchClick="handleSearchClick"
      @handleResetClick="handleResetClick"
    />
    <PageContent
      :tableConfig="goodsTableConfig"
      :pageName="pageName"
      ref="pageContentRef"
    >
      <template #imgUrl="{ row }">
        <el-image
          style="width: 60px; height: 60px"
          :src="row.imgUrl"
          :zoom-rate="1.2"
          preview-teleported="true"
          :preview-src-list="[row.imgUrl]"
          fit="cover"
        />
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'">{{
          row.status === 1 ? '在售' : '下架'
        }}</el-tag>
      </template>
      <template #oldPrice="{ row }">
        {{ row.oldPrice + '￥' }}
      </template>
      <template #newPrice="{ row }">
        {{ row.newPrice + '￥' }}
      </template>
      <template #favorCount="{ row }">
        <el-badge :value="row.favorCount" :max="9999">
          <el-icon :size="25"><Star /></el-icon>
        </el-badge>
      </template>
    </PageContent>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue';
import PageContent from '@/components/page-content/page-content.vue';
import { Star } from '@element-plus/icons-vue';
import { goodsSearchFormConfig } from './config/searchConfig';
import { goodsTableConfig } from './config/contentConfig';
import { useContentData } from '@/hooks/useContentData';
const pageName = 'goods';
const [pageContentRef, handleSearchClick, handleResetClick] = useContentData();
</script>

<style scoped lang="less">
:deep(.el-badge__content.is-fixed) {
  top: 8px;
  right: calc(-6px + var(--el-badge-size) / 2);
}
</style>
